{% extends "base.html" %}
{% block content %}

<link rel="stylesheet" href="/stylesheets/lightbox.css" type="text/css" media="screen" />
<link rel="stylesheet" href="/stylesheets/jplayer.blue.monday.css" type="text/css" />

<script type="text/javascript" src="/js/jquery.truncator.js"></script>
<script type="text/javascript" src="/js/jquery.lightbox.js"></script>
<script type="text/javascript" src="/js/jquery.jplayer.min.js"></script>

<script type="text/javascript" src="/js/show.js"></script>

<span id="nickname" style="display: none">{{ nickname }}</span>

<div id="sidebar">
	
	<h2>Commentary</h2>
	<!-- This must match the view file "comment.html". -->
	<ul id="comments">
	</ul>
	
	<h2>Hidden Comment Types</h2>
	<a class="show_comment_type" href="#">[cultural]</a>
	<a class="show_comment_type" href="#">[linguistic]</a>
	<a class="show_comment_type" href="#">[realia]</a>
	<a class="show_comment_type" href="#">[stylistic]</a>
	<a class="show_comment_type" href="#">[translation]</a>
	<a class="show_comment_type" href="#">[vocabulary]</a>
	<br/>
	
	{% if nickname %}
	<p><a href="#" id="upload_comment_form_label">Upload Comments</a></p>
	<form id="upload_comment_form" action="/comment" enctype="multipart/form-data" method="post">
		<input type="hidden" name="doc_key" id="doc_key" value="TBA" />
	    File: <input type="file" name="commentary"/> <br/>
	    <input type="submit" value="Upload">
	</form>
	{% endif %}
	
</div>

<div class="contentbox">
	<span id="document_id" style="display: none">{{document_id}}</span>
	<h2 id="title"></h2>
	<div id="text"></div>
</div>

<div id="media_form">
	{% if nickname %}
		<form action="/media" method="post" enctype="multipart/form-data" id="the_media_form">
			<input type="hidden" name="media_document" id="media_document" value="" />
			<input type="hidden" name="media_anchor" id="media_anchor" value="" />
			<p style="color: red">NB: Currently, only images and audio are supported.</p>
			<table>
				<tr>
					<td>Title:</td>
					<td><input type="text" name="media_title"/></td>
				</tr>
				<tr>
					<td>File:</td>
					<td><input type="file" name="media_content"/></td>
				</tr>
				<tr>
					<td colspan="2">
						<input type="submit" value="Upload">
					</td>
				</tr>
			</table>
		</form>
	{% else %}
		<p>Sorry, you must be signed in to upload media.</p>
	{% endif %}	
</div>

<div id="audio_player">
</div>
	
<div class="jp-single-player" style="display:none"> 
	<div class="jp-interface"> 
		<ul class="jp-controls"> 
			<li><a href="#" id="jplayer_play" class="jp-play" tabindex="1">play</a></li> 
			<li><a href="#" id="jplayer_pause" class="jp-pause" tabindex="1">pause</a></li> 
			<li><a href="#" id="jplayer_stop" class="jp-stop" tabindex="1">stop</a></li> 
			<li><a href="#" id="jplayer_volume_min" class="jp-volume-min" tabindex="1">min volume</a></li> 
			<li><a href="#" id="jplayer_volume_max" class="jp-volume-max" tabindex="1">max volume</a></li> 
		</ul> 
		<div class="jp-progress"> 
			<div id="jplayer_load_bar" class="jp-load-bar"> 
				<div id="jplayer_play_bar" class="jp-play-bar"></div> 
			</div> 
		</div> 
		<div id="jplayer_volume_bar" class="jp-volume-bar"> 
			<div id="jplayer_volume_bar_value" class="jp-volume-bar-value"></div> 
		</div> 
		<div id="jplayer_play_time" class="jp-play-time"></div> 
		<div id="jplayer_total_time" class="jp-total-time"></div> 
	</div> 
</div>

{% endblock %}